<template>
  <div>
    <!-- 固定头 -->
    <div class="top-bar">
      <div class="top-box">
        <div class="top-nav-list">
          <a href="">帮助中心</a>
          <a href="">收藏</a>
          <a href="">360官网</a>
          <a href="">360智慧生活</a>
        </div>
        <div class="top-user-box">
          <div class="login-box" v-show="!this.$store.state.useron">
            <div @click="showlogin">登录</div>
            <div @click="showRegister">注册</div>
          </div>
          <!-- 登录后用户表单 -->
          <div class="user-box" v-show="this.$store.state.useron">
            <div class="wel">欢迎{{this.$store.state.userp}}</div>
            <div class="out">
            <p>我的会员</p>
            <p>我的订单</p>
            <p>我的优惠券</p>
            <p>我的收藏</p>
            <p>我的积分</p>
            <p>我的预约</p>
            <p>收货地址</p>
            <p>账号设置</p>
            <p>退出登录</p>
            </div>
          </div>
          <div class="cart-box">
            <a href="">
              <img src="../assets/img/index/商城1_看图王.png" alt="" />
            </a>
            <div class="cart-box-text">
              <div>您的购物车还没有商品，赶紧去选购吧!</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 搜索栏 -->
    <div class="header-bar">
      <div class="header-box">
        <div class="header-bav-search">
          <a href="">
            <img src="../assets/img/index/360logo.jpg" alt="" />
          </a>
          <div class="nav-list">
            <a href="">新品推荐</a>
            <a href="">热卖榜单</a>
          </div>
          <div class="search-box">
            <div class="search-bar">
              <input type="text" value="摄像机" />
              <img src="../assets/img/index/搜索_看图王.png" alt="" />
            </div>
            <div class="search-suggest-list">
              <a href="">记录仪</a>
              <a href="">摄像机</a>
              <a href="">路由器</a>
              <a href="">耳机</a>
              <a href="">扫地机</a>
              <a href="">智能手表</a>
            </div>
          </div>
        </div>
           <!-- 菜单栏显示与隐藏 -->
        <div class="menu-box" v-if="$route.meta.show">
          <div class="menu-show">
            <a href="">
              <img src="../assets/img/shoplist/图标_.png" alt="" />
              <span>全部分类</span></a
            >
          </div>
          <div class="menu-hidden">
            <a href="" class="list">家庭安防</a>
            <a href="" class="list">安全路由</a>
            <a href="" class="list">智能手表</a>
            <a href="" class="list">汽车用品</a>
            <a href="" class="list">扫地机器人</a>
            <a href="" class="list">影音生活</a>
            <a href="" class="list">生态产品</a>
          </div>
        </div>
      </div>
    </div>  
  </div>
</template>

<script>
export default {
    methods: {
    showRegister() {
      this.$store.commit('updateShow',true),
      console.log(this.$store.state.userReg);
    },
     showlogin() {
      this.$store.commit('updatelogin',true),
      console.log(this.$store.state.userlog);
    },
   

  },
   
  
};
</script>
<style lang="scss" scoped>
 .user-box{
   color: #333;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    text-align: left;
   .wel{
     height: 40px;
     line-height: 40px;
     color: #fff;
     overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    width: 100px;
   }
   .out{
     display: none;
      width: 100px;
       background-color: #fff;
      position: absolute;
      top: 40px;
      p{
        margin: auto;
        // width: 100px;
        padding: 0 20px;
        height: 30px;
        line-height: 30px;
      }
   }
 }
 .user-box:hover > .out{
   display: block;
 }
</style>
